import React from 'react';
import Avatar from 'material-ui/lib/avatar';
import FileFolder from 'material-ui/lib/svg-icons/file/folder';
import styles from 'material-ui/lib/styles';
import FontIcon from 'material-ui/lib/font-icon';
import List from 'material-ui/lib/lists/list';
import ListItem from 'material-ui/lib/lists/list-item';

const colors = styles.Colors;

const AvatarExampleSimple = React.createClass({
  render() {
    return (
      <List>
        <ListItem
          disabled={true}
          leftAvatar={
            <Avatar src="images/uxceo-128.jpg" />
          }
        >
          Image Avatar
        </ListItem>
        <ListItem
          disabled={true}
          leftAvatar={
            <Avatar icon={<FileFolder />} />
          }
        >
          SvgIcon Avatar
        </ListItem>
        <ListItem
          disabled={true}
          leftAvatar={
            <Avatar
              icon={<FileFolder />}
              color={colors.orange200}
              backgroundColor={colors.pink400}
            />
          }
        >
          SvgIcon Avatar with custom colors
        </ListItem>
        <ListItem
          disabled={true}
          leftAvatar={
            <Avatar icon={<FontIcon className="muidocs-icon-communication-voicemail" />} />
          }
        >
          FontIcon Avatar
        </ListItem>
        <ListItem
          disabled={true}
          leftAvatar={
            <Avatar
              icon={<FontIcon className="muidocs-icon-communication-voicemail" />}
              color={colors.blue300}
              backgroundColor={colors.indigo900}
            />
          }
        >
          FontIcon Avatar with custom colors
        </ListItem>
        <ListItem
          disabled={true}
          leftAvatar={<Avatar>A</Avatar>}
        >
          Letter Avatar
        </ListItem>
        <ListItem
          disabled={true}
          leftAvatar={
            <Avatar
              color={colors.deepOrange300}
              backgroundColor={colors.purple500}
            >
              A
            </Avatar>
          }
        >
          Letter Avatar with custom colors
        </ListItem>
      </List>
    );
  },
});

export default AvatarExampleSimple;
